<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;padding: 0;list-style-type: none;
        }
        ul{
            background-image: url(img/timg.jpg);
            background-size: 640px;
            width: 640px;height: 640px;
            margin: 100px auto;
            padding: 16px;
        }
        li{
            width: 30px;
            height: 30px;
/*            background-color: red;*/
            float: left;
            border-radius: 50%;
            margin: 4px;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
            position: relative;
        }
        div{
            position: fixed;
            top: 20px;
            width: 100%;
            text-align: center;
            font-size: 30px;
        }
        p{
            position: fixed;
            top: 70px;
            width: 100%;
            text-align: center;
/*            font-size: 30px;*/
            cursor:alias;
/*            color: transparent*/
        }
        
        
    </style>
</head>
<body>
    <ul>
        
    </ul>
    <div>白子行动</div>
    <p>悔棋</p>
    <div>3</div>
    <div>4</div>
    <p>masterfgfgfgfgggag</p>
    <p>branch</p>
    <p>mastesadasdasdrfgfgfgfgggag</p>
</body>
<script>
    var ul = document.querySelector("ul");
    var p = document.querySelector("p");
    var div = document.querySelector("div");
    var nums = [];
    var shunxu = true;
    var huiqi = false;
    var dianjifangfa;
    var lis = [];
    var buzhou2 = 0;
    for(var i=0;i<16*16;i++){
        var li = document.createElement("li");
        li.style.backgroundColor = "yellow";
        lis[i] =li;
        li.num = i;
        ul.appendChild(li);
        li.onclick = function(){
            if(shunxu){
                this.style.backgroundColor = "white";
                this.onclick = "";
                this.style.cursor = "auto";
                nums[buzhou2] = this.num;
//                console.log(nums);
                shunxu = false;
                div.innerHTML = "黑子行动";
            }else{
                this.style.backgroundColor = "black";
                this.onclick = "";
                this.style.cursor = "auto";
                nums[buzhou2] = this.num;
//                console.log(nums);
                shunxu = true;
                div.innerHTML = "白子行动";
            }
//            console.log(nums);
//            console.log(buzhou2);
//            console.log(nums[buzhou2]);
            buzhou2 +=1;
        }
        dianjifangfa = li.onclick;
    }
    console.log(dianjifangfa);
    p.onclick = function(){
        if(buzhou2!=0){
            var ddd = nums[nums.length-1];
            buzhou2-=1;
            nums.pop()
//            console.log(nums);
            lis[ddd].style.backgroundColor = "transparent";
            lis[ddd].onclick =dianjifangfa;
            lis[ddd].style.cursor = "pointer";
            shunxu = !shunxu;
            if(shunxu){
                div.innerHTML = "白子行动";
            }else{
                div.innerHTML = "黑子行动";
            }
        }
    }
</script>
</html>